import React from 'react';
import { Button, Tooltip } from 'antd';
import Icon from '../Icon';
interface ActionButtonsProps {
  onActions: (action: string) => void;
  isFullScreen?: boolean;
  canRedo?: boolean;
  canUndo?: boolean;
}
const ActionButtons: React.FC<ActionButtonsProps> = function ({
  onActions,
  isFullScreen = false,
  canRedo = false,
  canUndo = false,
}) {
  const { innerSystem, outerSystem } = (window as any)._globalAssets;

  return (
    <div className="ra-arch-actionWrapper">
      <div className="ra-arch-actionButtons">
        <div className="ra-arch-btns-group">
          <Tooltip title="撤销">
            <Button disabled={!canUndo} onClick={() => onActions('undo')}>
              <Icon type="icon-undo" />
            </Button>
          </Tooltip>
          <Tooltip title="重做">
            <Button disabled={!canRedo} onClick={() => onActions('redo')}>
              <Icon type="icon-redo" />
            </Button>
          </Tooltip>
        </div>
        <div className="ra-arch-btns-group">
          <Tooltip title="缩小">
            <Button onClick={() => onActions('smaller')}>
              <Icon type="icon-smaller" />
            </Button>
          </Tooltip>
          <Tooltip title="放大">
            <Button onClick={() => onActions('bigger')}>
              <Icon type="icon-bigger" />
            </Button>
          </Tooltip>
          {isFullScreen ? (
            <Tooltip title="还原">
              <Button onClick={() => onActions('normal')}>
                <Icon type="icon-small" />
              </Button>
            </Tooltip>
          ) : (
            <Tooltip title="全屏">
              <Button onClick={() => onActions('full')}>
                <Icon type="icon-full" />
              </Button>
            </Tooltip>
          )}
        </div>
        <div className="ra-arch-btns-group">
          <Tooltip title="本地导入数据">
            <Button onClick={() => onActions('importData')}>
              <Icon type="icon-import-data" />
            </Button>
          </Tooltip>
          <Tooltip title="本地导出数据">
            <Button onClick={() => onActions('exportData')}>
              <Icon type="icon-export-data" />
            </Button>
          </Tooltip>
          <Tooltip title="本地导出图片">
            <Button onClick={() => onActions('exportImg')}>
              <Icon type="icon-export-img" />
            </Button>
          </Tooltip>
          <Tooltip title="上传数据">
            <Button onClick={() => onActions('save')}>
              <Icon type="icon-save-clound" />
            </Button>
          </Tooltip>
          <Tooltip title="复制节点">
            <Button onClick={() => onActions('copy')}>
              <Icon type="icon-copy" />
            </Button>
          </Tooltip>
          <Tooltip title="粘贴节点">
            <Button onClick={() => onActions('paste')}>
              <Icon type="icon-paste" />
            </Button>
          </Tooltip>
          <Tooltip title="删除节点">
            <Button onClick={() => onActions('delete')}>
              <Icon type="icon-delete" />
            </Button>
          </Tooltip>
          <Tooltip title="清理缓存">
            <Button onClick={() => onActions('clearStorage')}>
              <Icon type="icon-clear-storage" />
            </Button>
          </Tooltip>
        </div>
      </div>
      <div className="ra-arch-systemDesc">
        <div>
          <img src={innerSystem} />
          内部系统
        </div>
        <div>
          <img src={outerSystem} />
          外部系统
        </div>
      </div>
    </div>
  );
};

export default ActionButtons;
